<template>
	<view class="contianer">
		<view class="infoBg" :style="{'background': 'url('+pic +')'}"></view>
		<Header :isShow='isShow' :title="plyerIfo.data.name" style="color: white;" :isPlay="isplay" :pid='pid'/>
		<view class="content">
			<scroll-view scroll-y="true">
				<view class="detail-play" @click="stop">
					<image :src="pic" :class="{'detail-play-run': isIconPlay}"></image>
					<text class="iconfont " :class='iconPlay'></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-warp" :style="{'transform':'translateY('+ -(lyricIndex) * 82+'rpx)'}">
						<view class="detail-lyric-item" v-for="(item, index) in lyric" :key="index" :class="{'active': lyricIndex + 1 == index}">{{item.lyric}}</view>
					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">
						喜欢这首歌的人也听
					</view>
					<view class="detail-like-list">
						<view class="detail-like-item" v-for="item in simiPlayerList" :key="item.id" @tap="toPlayerMusic(item.id)">
								<view class="detail-like-item-img">
									<image :src="item.album.blurPicUrl" mode=""></image>
								</view>
								<view class="detail-like-item-info">
									<view class="detail-like-item-info-name">
										<text>
											{{item.name}}
										</text>
									</view>
									<view class="detail-like-item-info-player">
										{{item.artists[0].name}}-{{item.name}}
									</view>
								</view>
								<view class="detail-like-item-info-icon">
									<text class="iconfont icon-bofang_o" style="color: silver"></text>
								</view>	
						</view>
					</view>
				</view>
				
				<view class="detail-comment">
					<view class="detail-comment-head">
						精彩评论
					</view>
					<view class="detail-comment-list">
						<view class="detail-comment-list-item" v-for="(item, index) in commentsPeople" :key="item.commentId">
							<view class="detail-comment-list-item-mian">
								<view class="detail-comment-list-item-img">
									<image :src="item.user.avatarUrl"></image>
								</view>
								<view class="detail-comment-list-item-inFo">
									<view class="detail-comment-list-item-inFo-head">
										<view class="detail-comment-list-item-inFo-head-left">
											<view class="user-name">
												{{item.user.nickname}}
											</view>
											<view class="user-time">
												{{item.timeStr}}
											</view>
										</view>
										<view class="detail-comment-list-item-inFo-head-right">
											<view class="dianzanOfNumber">
												{{item.likedCount}}<text class="iconfont icon-dianzan"></text>
											</view>
										</view>
									</view>
									<view class="detail-comment-list-item-inFo-body">
										<text>
											{{item.content}}
										</text>
									</view>
								</view>
							</view>
							<view class="line-box">
								
							</view>
						</view>
					</view>
				
				</view>
			</scroll-view>
		</view>
	
	</view>
</template>

<script>
	import Header from '@/components/header/index.vue'
	import {ref, reactive} from 'vue'
	import {onLoad, onUnload, onHide} from '@dcloudio/uni-app';
	import { plyerInfo, simiPlayer, comment, getLyric, song } from "@/common/api.js"
	import { useSaveList }from '@/store/index.js'
	
	export default {
		name:'musicInfo',
		components:{Header},
		setup() {
			
			//状态
			let isShow = ref(true)
			let plyerIfo = reactive({data:{}})
			let simiPlayerList = reactive([])
			let commentsPeople = reactive([])
			let lyric = reactive([])
			let lyricIndex = ref(0)
			let songUrl = ref('') 
			let isIconPlay = ref(true)
			const savePlayerList = useSaveList()
			const innerAudioContext = uni.createInnerAudioContext();
			let timer
			let pid = ref('')
			let iconPlay = ref('icon-bofang')
			let pic = ref('')
			let isplay = ref(1)
			
			//方法
			
			/*
			处理歌词
			*/
			let fliterLyric = (res) =>{
				let lyric = res
				let re = /\[([^\]]+)\]([^\[]+)/g
				let result = []
				lyric.replace(re, ($0,$1,$2)=>{
					result.push({"time" :format($1), "lyric":$2})
				})
				return result
			}
			
			let format = value => {
				let arr = value.split(":")
				return (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			}
			

			/*
			播放音乐
			*/
			let playMusic = (res) => {
				
				// 创建音乐播放
				innerAudioContext.autoplay = true;
				// 歌曲播放地址
				innerAudioContext.src = res.url;
				// 打开歌词定时器
				listenLyricIndex()
				
				// 监测音乐播放时
				innerAudioContext.onPlay(() => {
					isIconPlay.value = true
					iconPlay.value = 'icon-zanting'
					// 打开歌词定时器
					listenLyricIndex()
				});
				// 监测音乐暂停时
				innerAudioContext.onPause((res) => {
					iconPlay.value =  'icon-bofang'
					isIconPlay.value = false
					// 清除歌词定时器
					clearTimer()
				});
				// 监测音乐结束的时候
				innerAudioContext.onEnded(() => {
					// 获取下一首歌曲的id
					toPlayerMusic(savePlayerList.nextId)
				});
			}
			
			// 歌词定时器
			let listenLyricIndex = () => {
				clearInterval(timer)
				timer = setInterval(()=>{
					for(let i = 0; i < lyric.length; i++){
						if(innerAudioContext.currentTime > lyric[i].time && innerAudioContext.currentTime < lyric[i + 1].time){
							lyricIndex.value = i - 1
						}else if(innerAudioContext.currentTime > lyric[lyric.length - 1].time){
							lyricIndex.value = lyric.length - 1
							break
						}
					}
				},500)
			}
			
			let clearTimer = (timer) => {
				clearInterval(timer)
			}
			
			
			// 界面操作方法（需要暴露出去的方法）
			let toPlayerMusic = (id) =>{
				innerAudioContext.pause()
				if(id === ''){
					uni.navigateTo({
						url:`../index/index`
					})
				}else{
					uni.navigateTo({
						url:`../playerMusic/playerMusic?id=${id}&uid=${pid.value}`
					})
				}
			}
			
			let stop = () => {
				if(innerAudioContext.paused){
					innerAudioContext.play()
				}else{
					innerAudioContext.pause()
				}
			}
			
			//生命周期
			onLoad(async(data)=>{
				
				if (data.uid === '1'){
					isplay.value = 4
				}
				
				uni.showLoading({
					title: '加载中'
				})
				pid.value = data.uid
				
				savePlayerList.nextID(data.id)
				
				// 获取歌曲详情
				const resForPlyerInfo = await plyerInfo(data.id)
				plyerIfo.data = resForPlyerInfo[0]
				pic.value = resForPlyerInfo[0].al.picUrl
				
				iconPlay.value = 'icon-zanting'
				// 获取相似歌单
				const resForSimiPlayer = await simiPlayer(data.id)
				simiPlayerList.push(...resForSimiPlayer)
				
				// 获取评论
				const resForComment = await comment(data.id)
				commentsPeople.push(...resForComment)
				
				// 获取歌词
				const resForLyric = await getLyric(data.id)
				const lyricReslut = fliterLyric(resForLyric).filter(val =>{
					return val.lyric !== '\n'
				})
				lyric.push(...lyricReslut)
				
				// 获取歌曲
				const resForSong = await song(data.id)
				playMusic(resForSong)
				
				uni.hideLoading()
			})
			
			onUnload(() => {
				innerAudioContext.destroy()
				
			})
			
			onHide(()=>{
				uni.hideLoading()
			})
			return {
				//状态
				isShow,
				plyerIfo,
				simiPlayerList,
				commentsPeople,
				lyric,
				lyricIndex,
				songUrl,
				isIconPlay,
				pid,
				iconPlay,
				pic,
				isplay,
				// 方法
				toPlayerMusic,
				stop
			}
		}
	}
</script>

<style scoped>
.infoBg{width: 100%;height: 100vh;position: fixed;left: 0;top: 0;background-size: cover;background-position: center 0;filter: blur(10px) brightness(0.25);transform: scale(1.2);}
.detail-play{width: 580rpx;height: 580rpx;background: url(../../static/pic/bg.png);background-size: cover;margin: 214rpx auto 0 auto;position: relative;}
.detail-play image{width: 370rpx;height: 370rpx;border-radius: 50%;position: absolute;left: 0;right: 0;top:0;bottom: 0;margin: auto;animation: 10s linear move infinite;animation-play-state: paused;}
.detail-play .detail-play-run{animation-play-state: running;}
@keyframes move{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.detail-play text{width: 100rpx;height: 100rpx;font-size: 100rpx;color: white;position: absolute;left: 0;right: 0;top:0;bottom: 10rpx;margin: auto;background:rgba(0,0,0,0.4);border-radius: 50%;}
.detail-play view{width: 230rpx;height: 380rpx;background: url(../../static/pic/needle-ab.png);position: absolute;left: 160rpx;right: 0;top: -225rpx;margin: auto;background-size: cover;}
.detail-lyric{ font-size: 32rpx; line-height: 82rpx; height: 246rpx; text-align: center;overflow: hidden; color: #6f6e73;margin: 0 30rpx;}
.detail-lyric-warp{transition: 0.5s;}
.detail-lyric-item{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.active{ height: 82rpx; color: white;}
.detail-like{width: 580rpx;}
.detail-like-head{
	width: 100%;
	height: 80rpx;
	padding-left: 30rpx;
	padding-top: 30rpx;
	color: white;
	font-size: 40rpx;
}
.detail-like-list{width: 100%;padding: 30rpx;}
.detail-like-item{position: relative;width: 690rpx;height: 120rpx; margin: 30rpx 0;}
.detail-like-item-img{width: 100rpx;height: 100rpx;border-radius: 20rpx;overflow: hidden;position: absolute;left: 10rpx;}
.detail-like-item-img image{height: 100%; width: 100%;border-radius: 20rpx}
.detail-like-item-info{position: absolute;left: 130rpx;height: 100rpx;color:white;width: 470rpx;}
.detail-like-item-info-name{font-size: 30rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.detail-like-item-info-player{font-size: 26rpx;margin-top: 10rpx;color: silver;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.detail-like-item-info-icon{position: absolute;right: 0;}
.icon-bofang_o{font-size: 90rpx;color:white;}
.detail-comment{width: 100%;}
.detail-comment-head{
	width: 100%;
	height: 80rpx;
	padding-left: 30rpx;
	padding-top: 30rpx;
	color: white;
	font-size: 40rpx;
	}
.detail-comment-list{ margin: 30rpx; display: flex;flex-direction: column;}
.detail-comment-list-item{width: 100%;margin-bottom: 30rpx;}
.detail-comment-list-item-mian{display: flex;width: 100%; height: auto;}
.detail-comment-list-item-img{width: 65rpx;height: 64rpx;overflow: hidden;border-radius: 50%;margin-right: 18rpx;}
.detail-comment-list-item-img image{width: 100%;height: 100%;}
.detail-comment-list-item-inFo{width: 580rpx;overflow: hidden;display: flex;flex-direction: column;color: white;}
.detail-comment-list-item-inFo-head{display: flex;justify-content: space-between;}
.user-time{font-size: 20rpx;margin-top: 5rpx;color: silver;margin-bottom: 5rpx;}
.detail-comment-list-item-inFo-body{width: 98%;padding: 10rpx;}
.detail-comment-list-item-inFo-body text{overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;line-height: 50rpx;word-wrap: break-word;word-break: break-all;}
.line-box{
	background: linear-gradient(to left, rgba(238, 238, 238, 0) 0%,rgba(238, 238, 238, 0.6) 50%, rgba(238, 238, 238,0) 100%); 
	width: 100%;
	height: 2rpx; 
	margin-bottom: 20rpx;
	margin-top: 20rpx;
}
.user-name{
	font-size: 20rpx;
	color: #eee;
}
</style>
